import { Descriptions, Table, Typography, Button } from "antd";
import React, { Component } from "react";
import { Inquirydetail } from "../../../services/auth";

const { Text } = Typography;
const columns = [
  {
    title: "产品编号",
    dataIndex: "goods_id",
    key: "goods_id",
    align: "center",
  },
  {
    title: "产品名称",
    dataIndex: "goods_name",
    key: "goods_name",
    align: "center",
  },
  {
    title: "订货数量",
    dataIndex: "quatity",
    key: "quatity",
    align: "center",
  },
  {
    title: "产品定价（件/元）",
    dataIndex: "price",
    key: "price",
    align: "center",
  },
  {
    title: "产品期望价格（件/元）",
    dataIndex: "expectprice",
    key: "expectprice",
    align: "center",
  },
];

export default class Inquiry_detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {}, //询价单整体
      arr: [],
      dataSource: [], //商品列表
    };
  }
  componentWillMount() {
    const { id } = this.props;
    Inquirydetail(id).then(
      (response) => {
        console.log(response.data); ////查看后台数据
        //拿到我们想要渲染的数据(res)
        this.state.arr = response.data; //更新state，让视图刷新
        this.setState({
          data: this.state.arr,
          dataSource: this.state.arr.goods,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  }
  render() {
    const { data, dataSource } = this.state;
    return (
      <div>
        <Descriptions layout="vertical" column={4}>
          <Descriptions.Item label="询价单编号">{data.id}</Descriptions.Item>
          <Descriptions.Item label="公司名称">
            {data.company_name}
          </Descriptions.Item>
          <Descriptions.Item label="操作员" span={2}>
            {data.operator_id}
          </Descriptions.Item>
          <Descriptions.Item label="询价日期">
            {data.valid_from}
          </Descriptions.Item>
          <Descriptions.Item label="询价有效期至">
            {data.valid_to}
          </Descriptions.Item>
          <Descriptions.Item label="预计送达日期">
            {data.req_deliv_date}
          </Descriptions.Item>
          <Descriptions.Item label="预计送货地点">
            {data.ship_to_address}
          </Descriptions.Item>
        </Descriptions>
        <Table
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          rowKey={(record) => record.goods_id}
          bordered
          summary={(pageData) => {
            let totalQuatity = 0;
            let totalPrice = 0;
            let totalExpectprice = 0;

            pageData.forEach(({ quatity, price, expectprice }) => {
              totalQuatity += quatity * 1;
              totalPrice += quatity * price;
              totalExpectprice += quatity * expectprice;
            });
            return (
              <>
                <Table.Summary.Row>
                  <Table.Summary.Cell align="center">合计</Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>
                  <Table.Summary.Cell align="center">
                    <Text type="danger">{totalQuatity}</Text>
                  </Table.Summary.Cell>
                  <Table.Summary.Cell align="center">
                    <Text type="danger">{totalPrice}</Text>
                  </Table.Summary.Cell>
                  <Table.Summary.Cell align="center">
                    <Text type="danger">{totalExpectprice}</Text>
                  </Table.Summary.Cell>
                </Table.Summary.Row>
              </>
            );
          }}
        />
        ;
      </div>
    );
  }
}
